{% extends 'tpls/base.html' %}
{% load settings_tags static %}

{% block title %}Home{% endblock %}

{% block head %}
    {{ block.super }}

    {% settings 'SEO_KEYWORDS' as keywords %}
    {% settings 'SEO_DESC' as description %}

    <meta name="keywords" content="{{ keywords }}" >
    <meta name="description" content="{{ description }}" >
{% endblock %}

{% block header %}
    {% include 'tpls/header.html' %}
{% endblock %}

{% block content %}

{% settings 'SITE_NAME' as site_name %}

<!-- About Start -->
<section class="section bg-grey" id="about">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-6 col-md-8">
                <div class="text-center mb-5">
                    <h2 class="highlight header-colorize text-uppercase mb-3">All What You Need is Here</h2>
                </div>
            </div>
        </div>

        <div class="row align-items-center">
            <div class="col-lg-5">
                <img src="{% get_media_prefix %}images/links_stats.png" alt="" class="img-fluid mx-auto d-block">
            </div>
            <div class="col-lg-6 offset-lg-1">
                <div class="text-sub mt-5 mt-lg-0">
                    <h3 class="title font-weight-medium mb-4">Monitor your link performance.</h3>
                    <p class="mb-4 size-15">Advanced analytics for each individual link, including geo and device information, referrers, browser, ip and more.</p>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- About End -->

<!-- About Start -->
<section class="section" id="about">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6 offset-lg-1">
                <div class="text-sub mt-5 mt-lg-0">
                    <h3 class="title font-weight-medium mb-4">Manage your links.</h3>
                    <p class="mb-4 size-15">Control everything from the dashboard. Manage your Links, groups, pixels, custom domains and more.</p>
                </div>
            </div>
            <div class="col-lg-5">
                <img src="{% get_media_prefix %}images/links_CRUD.png" alt="" class="img-fluid mx-auto d-block">
            </div>
        </div>
    </div>
</section>
<!-- About End -->


<!-- Services Start -->
<section class="section bg-grey" id="services">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-6 col-md-8">
                <div class="text-center mb-5">
                    <div class="text-center mb-5">
                    <h2 class="highlight header-colorize text-uppercase mb-3">Best Features</h2>
                    <p class="text-sub size-14">{{ site_name|capfirst }} platform provides the most wanted and useful features to improve your business.</p>
                </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-4 col-md-6">
                <div class="services-container pr-4 pl-4">
                    <div class="services-icon mt-3">
                        <i class="bi bi-globe"></i>
                    </div>
                    <h3 class="mb-4 mt-4 services-title">Custom Domains</h3>
                    <p class="text-sub size-15">Ability to use a custom domain for your campaigns & offers links to get more clicks/traffic,<br>Your links will look much more professional for your business.</p>
                </div>
            </div>
            <div class="col-lg-4 col-md-6">
                <div class="services-container pr-4 pl-4">
                    <div class="services-icon mt-3">
                        <i class="bi bi-signpost-2"></i>
                    </div>
                    <h3 class="mb-4 mt-4 services-title">Multi-Redirection</h3>
                    <p class="text-sub size-15">One of the Best Features <b>{{ site_name|capfirst }}</b> platform can provide to filter and control your traffic to improve your business, it allows you to redirect the link traffic based on their geo-locations, devices, browsers, and platforms (e.g. Windows, Linux, macOS) to different destinations.</p>
                </div>
            </div>
            <div class="col-lg-4 col-md-6">
                <div class="services-container pr-4 pl-4">
                    <div class="services-icon mt-3">
                        <i class="bi bi-lock"></i>
                    </div>
                    <h3 class="mb-4 mt-4 services-title">Password Protection</h3>
                    <p class="text-sub size-15">Set a password to your links to protect them and restrict their access,<br> Much valuable feature for protecting your private content.</p>
                </div>
            </div>
            <div class="col-lg-4 col-md-6">
                <div class="services-container pr-4 pl-4">
                    <div class="services-icon mt-3">
                        <i class="bi bi-boxes"></i>
                    </div>
                    <h3 class="mb-4 mt-4 services-title">UTM Builder</h3>
                    <p class="text-sub size-15">A useful feature when it comes to sharing/informing link information with third-party platforms.</p>
                </div>
            </div>
            <div class="col-lg-4 col-md-6">
                <div class="services-container pr-4 pl-4">
                    <div class="services-icon mt-3">
                        <i class="bi bi-calendar-check"></i>
                    </div>
                    <h3 class="mb-4 mt-4 services-title">Schedule</h3>
                    <p class="text-sub size-15">A valuable feature for scheduling your link access with time, mainly needed for limited-time offers.</p>
                </div>
            </div>
            <div class="col-lg-4 col-md-6">
                <div class="services-container pr-4 pl-4">
                    <div class="services-icon mt-3">
                        <i class="bi bi-graph-up"></i>
                    </div>
                    <h3 class="mb-4 mt-4 services-title">Advanced Stats</h3>
                    <p class="text-sub size-15">Advanced statistic for each individual link to monitor your link traffic and an optimal and convenient way, including geo and device information, referrers, browser, ip and more.</p>
                </div>
            </div>

        </div>
    </div>
</section>
<!-- Services End -->


<!-- Accomplished Start -->
{% if settings.SHOW_INITIAL_VALUES %}
<Section class="section accomplished-counter-bg">
    <div class="accomplished-counter-bg"></div>
    <div class="container">
        <div class="row align-items-center" id="accomplished-counter">
            <div class="col-lg-3 col-md-6">
                <div class="accomplished-counter-box text-center px-4 py-5 mb-4 mb-lg-0">
                    <div class="text-white">
                        <i class="bi bi-globe accomplished-counter-icon mx-auto"></i>
                        <h1 class="mb-2 mt-3"><span class="accomplished-counter-value mt-4" counter="{{ settings.TOTAL_DOMAINS }}">0</span>+</h1>
                        <p class="mb-0 text-white-70">Domains</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6">
                <div class="accomplished-counter-box text-center mb-4 mb-lg-0 px-4 py-5">
                    <div class="text-white">
                        <i class="bi bi-eye accomplished-counter-icon mx-auto"></i>
                        <h1 class="mb-2 mt-3"><span class="accomplished-counter-value mt-4" counter="{{ settings.TOTAL_CLICKS }}">0</span>+</h1>
                        <p class="mb-0 text-white-70">Clicks</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6">
                <div class="accomplished-counter-box text-center mb-4 mb-lg-0 px-4 py-5">
                    <div class="text-white">
                        <i class="bi bi-link-45deg accomplished-counter-icon mx-auto"></i>
                        <h1 class="mb-2 mt-3"><span class="accomplished-counter-value mt-4" counter="{{ settings.TOTAL_LINKS }}">0</span>+</h1>
                        <p class="mb-0 text-white-70">Links</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6">
                <div class="accomplished-counter-box text-center mb-4 mb-lg-0 px-4 py-5">
                    <div class="text-white">
                        <i class="bi bi-people accomplished-counter-icon mx-auto"></i>
                        <h1 class="mb-2 mt-3"><span class="accomplished-counter-value mt-4" counter="{{ settings.TOTAL_USERS }}">0</span></h1>
                        <p class="mb-0 text-white-70">Users</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</Section>
{% endif %}
<!-- Accomplished End -->


<!-- About Start -->
<section class="section bg-grey" id="about">
    <div class="container text-center">
        <h2 class="header-colorize mb-4">The easiest way to get more clicks with custom links.</h2>

        <a href="{% url 'register' %}" class="btn btn-primary ml-2">Register Now <span class="ml-2 right-icon"><i class="fas fa-arrow-right"></i></span></a>
    </div>
</section>
<!-- About End -->

{% endblock %}
